<template>
  <view style="padding:30rpx;margin-top:30rpx;background: #fff">
    <view class="title">选择留言类别</view>
    <view class="checkList uni-row">
      <view v-for="(type,i) in parms.type" :class="['btn',parms.checktype==type.id ?'cur':'']" @click="checkType(type.id)">
        {{ type.type }}
      </view>
    </view>
    <view class="title uni-row" style="margin-top:40rpx;">选择留言领域：<view style="font-size:25rpx;color:#999;margin-left:20rpx;">{{parms.checkClassEn}}</view></view>
    <view class="checkList uni-row">
      <picker :range="parms.classify[idx]?.child" range-key="name" v-for="(ly,idx) in parms.classify"
              :class="['btn',parms.checkclassify==idx ?'cur':'']" v-if="parms.classify.length>0"
              @change="bindPickerChangely($event,idx)">
        {{ ly.name }}
      </picker>
    </view>
    <view class="next uni-row" style="margin:60rpx 0 60rpx 0;">
      <view style="flex:1;margin-right:10rpx;"><uv-button type="primary" text="上一步"  plain  @click="pre" size="large"></uv-button></view>
      <view  style="flex:1;margin-left:10rpx;"><uv-button type="primary" text="下一步" @click="next" size="large"></uv-button></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  getLeader,
} from "../../common/api";
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  watch
} from 'vue'
import {
  postProps
} from "@/stores/post";
const postparms = postProps();


const picker = ref(null)
const checkclassifyary = ref([])
const parms = reactive({
  type: [],
  classify: [],
  checktype: 1,
  checkclassify: '999',
  checkclassify2:0,
  checkClassEn:''
})
const checkType = (i) => {
  parms.checktype = i
}
const bindPickerChangely = (e, id) => {
  parms.checkclassify = id
  let classify2 = e.detail.value
  parms.checkclassify2 = parms.classify[id].child[classify2].id
  parms.checkClassEn = parms.classify[id].name+'/'+parms.classify[id].child[classify2].name
  postparms.setClassify(parms.classify[id].name+'/'+parms.classify[id].child[classify2].name)
}
const checkLingyu = (i) => {
  let _key = parms.classify.findIndex((item, idx) => idx === i)
  checkclassifyary.value = parms.classify[_key].child
  picker.value.open();
}
getLeader().then(r => {
  parms.type = r.data.type
  parms.classify = r.data.lingyu
})
const pre = () => {
  uni.navigateBack()
}
const next = () => {
  if(parms.checkclassify2==0){
    uni.showModal({
      title: '提示',
      content: '请选择留言领域',
      showCancel: false,
    })
    return false
  }

  let typeidx = parms.type.findIndex((item, idx) => item.id === parms.checktype)
  postparms.setType(parms.type[typeidx].type)
  postparms.setPostType(parms.checktype)
  postparms.setPostClassify2(parms.checkclassify2)
  uni.navigateTo({
    url: '/pages/thread/post3'
  })
}
</script>


<style scoped lang="scss">
.title {
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
  font-size: 32rpx;
}

.checkList {
  flex-wrap: wrap;

  .btn {
    width: calc(33.33% - 24rpx);
    text-align: center;
    color: #999;
    border: 1px solid #999;
    border-radius: 8rpx;
    padding: 10rpx 0;
    height: 50rpx;
    line-height: 50rpx;
    margin: 30rpx 20rpx 0 0;

    &.cur {
      border-color: $baseColor;
      color: $baseColor;
    }
  }
}
</style>
